<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title}">登录</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        /* 增大输入框和按钮的字体大小 */
        input[type="text"],
        input[type="password"],
        button {
            font-size: 24px;
            padding: 15px;
            margin-bottom: 20px;
        }
        /* 增大标签字体大小 */
        label {
            font-size: 28px;
        }
        /* 优化输入框样式 */
        input[type="text"],
        input[type="password"] {
            border: 2px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: border-color 0.3s ease;
        }
        input[type="text"]:focus,
        input[type="password"]:focus{
            border-color: #FF6B6B;
            outline: none;
        }
    </style>
</head>
<body>
<header th:replace="fragments/header :: header"></header>

<main class="container">
    <h1 th:text="${title}" style="font-size: 48px;">登录</h1>
    <p th:text="${message}" style="color: green; font-size: 28px;"></p>
    <form action="#" th:action="@{/login}" method="post">
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
            <label for="password">密 码:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <button type="submit" class="cta-button">登录</button>
    </form>
</main>

<footer th:replace="fragments/footer :: footer"></footer>
<script>
    function setMainPadding() {
        const footer = document.querySelector('footer');
        const main = document.querySelector('main.container');
        const footerHeight = footer.offsetHeight;
        main.style.paddingBottom = footerHeight + 'px';
    }

    // 页面加载完成时设置
    window.addEventListener('load', setMainPadding);
    // 窗口大小改变时重新设置
    window.addEventListener('resize', setMainPadding);
</script>
</body>
</html>